<template>
	<view style="padding: 10px;">
		<view class="custom-search-border">
			<!-- <uni-row>
				<uni-col :span="21"> -->
					<view class="custom-search-bar">
						<view style="margin-left: 4px;" @click="getTime">
							<text class="uni-time-text">{{ showTime[0] }}</text>
							<text class="uni-time-text">{{ showTime[1] }}</text>
						</view>
					      <!-- 左侧搜索输入框 -->
					      <input
					        class="search-input"
					        v-model="description"
					        placeholder="请输入搜索内容"
					        placeholder-class="placeholder-style"
					        @confirm="onSearch"
							@input="onInput"
					      />
							<!-- 清除图标 -->
							<view v-if="showClear" class="clear-button" @click="onClear">
								<uni-icons type="clear" size="18" color="#999"></uni-icons>
							</view>
					      <view class="search-button" @click="onSearch">
					      	<text class="button-text">搜索</text>
					      </view>
					    </view>
				<!-- </uni-col>
				<uni-col :span="2" style="text-align: center;"> -->
					
				<!-- </uni-col>
			</uni-row> -->
		    <view class="uni-slect-view">
		    	<uni-row :gutter="2" class="uni-row-select">
		    		<uni-col :span="7">
		    			<view class="uni-select-col">
		    			<uni-data-select
		    				v-model="stateValue"
		    				:localdata="range"
		    				@change="stateChange"
		    				:clear="false"
		    			></uni-data-select>
		    			</view>
		    		</uni-col>
		    		<!-- <uni-col :span="8">
		    			<uni-data-select
		    				v-model="shopValue"
		    				:localdata="shopOption"
		    				@change="stateChange"
		    				placeholder='部门'
		    				:clear="false"
		    			></uni-data-select>
		    		</uni-col> -->
		    		<!-- <uni-col :span="7">
		    			<uni-data-picker placeholder="排序" popup-title="请选择排序方式" :localdata="dataTree" v-model="classes"
		    				@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
		    			</uni-data-picker>
		    		</uni-col> -->
		    		<uni-col :span="7">
		    			<view class="uni-select-col">
		    				<uni-data-select
		    					v-model="timeValue"
		    					:localdata="timeOPtion"
		    					@change="stateChange"
		    				    placeholder='推荐排序'
		    					:clear="false"
		    				></uni-data-select>
		    			</view>
		    		</uni-col>
		    		<uni-col :span="8">
		    			<view class="uni-select-col">
		    			<uni-data-select
		    				v-model="persValue"
		    				:localdata="personPosition"
		    				@change="personChange"
		    				placeholder='查看对象'
		    				:clear="false"
		    			></uni-data-select>
		    			</view>
		    		</uni-col>
		    		<uni-col :span="2">
						<!--  @click="toggle('bottom')" -->
		    			<view class="uni-col-select-view"><image src="/static/select1.svg" style="width: 24px;height: 24px;margin-top: 5px;"></image></view>
		    		</uni-col>
		    	</uni-row>
		    </view>
			  
		</view>
		
		  <view>
			<!-- 普通弹窗 -->
			<uni-popup ref="timePopup" background-color="#fff" @change="change">
				<view class="timepopup-content">
			        <view style="padding: 5px;">
						<uni-forms label-position="top" style="padding: 10px;">
							<uni-forms-item label="时间范围">
								<uni-datetime-picker v-model="rangeTime" type="datetimerange" :clearIcon="false"  @change="changeLog" />
							</uni-forms-item>
						</uni-forms>
					</view>
						
						<!-- <view><button type="primary" style="border-radius: 20px; background-color: #007aff">确定</button></view> -->
						</view>
			</uni-popup>
				<!-- 普通弹窗 -->
				<uni-popup ref="popup" background-color="#fff" @change="change" style="width: 100%;">
					<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
						<view style="width: 100%; height: 100%;">
							<uni-row>
								<uni-col :span="5">
									<view class="uni-tab-col">
										<view class="uni-tab-list" :class="{ 'uni-tab-color': tabValue === '1' }" @click="tabChange('1')">部门</view>
										<!-- <view class="uni-tab-list" :class="{ 'uni-tab-color': tabValue === '2' }" @click="tabChange('2')">部门</view>
										<view class="uni-tab-list" :class="{ 'uni-tab-color': tabValue === '3' }" @click="tabChange('3')">部门</view> -->
									</view>
								</uni-col>
								<uni-col :span="19">
									<view style="height: 350px;width: 100%;padding-left: 10px;">
										 <uni-data-checkbox multiple v-model="checkShop" :localdata="shopOption"></uni-data-checkbox>
									</view>
								</uni-col>
							</uni-row>
							<view style="padding: 5px;">
								<uni-row :gutter="5" style="text-align: center;">
									<uni-col :span="12">
										<button style="margin-top: 10px;border-radius: 20px;" type="default" @click="clearShop">重置</button>
									</uni-col>
									<uni-col :span="12">
										<button style="margin-top: 10px; background-color: #007aff;border-radius: 20px;" type="primary" @click="clickShop">确定</button>
									</uni-col>
								</uni-row>
							</view>
						</view>
						</view>
				</uni-popup>
		   </view>
		  <view style="margin-top: 10px;">
			  <scroll-view 
			    scroll-y 
			    :style="{ height: '85vh' }" 
			    @scrolltolower="handleScrollToLower"
			  >
			    <uni-list>
			      	<uni-list-item v-for="(item, index) in tableData" :key="index" :clickable="true"  @click="viewInfor(item.id)">
			    		<!-- 自定义 header -->
			    		<template v-slot:header>
			    			<view style="width: 100%;">
			    				<text class="header-title">{{ item.description }}</text>
								<view style="margin-top: 10px;">
									<view class="uni-header-tag">
										<uni-tag class="header-tag" style="margin-left: 10px;" :text="item.state" :type="item.state === '已处理' ? 'success': item.state === '待处理' ? 'warning' : 'error'" />
									</view>
									<uni-row style="width: 100%;">
										<uni-col :span="15">
											<view class="header-shop">{{ item.workshop }}-<label v-if="item.lineName != null">{{ item.lineName }}-</label> {{ item.workshoparea }}</view>
										</uni-col>
										<uni-col :span="9" style="text-align: right;">
											<view v-if="item.state != '已处理'" class="header-note">{{ item.createTime }}  </view>
											<view v-if="item.state === '已处理'" class="header-note" >{{ item.abarbeitungTime }}</view>
										</uni-col>
									</uni-row>
									<!-- <text class="header-note" :style="{ color: item.state === '已处理' ? '#18bc37' : (item.state === '待处理' ? '#f3a73f' : '#e43d33')}">{{item.state}}</text> -->
								</view>
			    			</view>
									
			    		</template>
			    	</uni-list-item>
			    </uni-list>
			    <uni-load-more :status="isNoMore ? 'noMore' : 'loading'" /> <!-- 加载状态提示‌:ml-citation{ref="5,6" data="citationList"} -->
			  </scroll-view>
		  </view>
	</view>
</template>

<script>
    import { timestampFormatDate } from '../../../utils/FormatTime.js'
	import { post, postForm } from '../../../utils/request.js';
	export default {
		data() {
			return {
				classifyUserId: '',
				showTime: [],
				tabValue: '1',
				shopValue: '',
				checkShop: [],
				shopOption: [],
				classes: '',
				dataTree: [{
					text: "检查时间",
					value: "1-0",
					children: [{
						text: "升序",
						value: "1-1"
					},
					{
						text: "降序",
						value: "1-2"
					}]
				},
				{
					text: "整改时间",
					value: "2-0",
					children: [{
						text: "升序",
						value: "2-1"
					},
					{
						text: "降序",
						value: "2-2"
					}]
					},
					],
				timeValue: '',
				timeOPtion: [{
					text: '检查时间',
					value: 0
				},{
					text: '整改时间',
					value: 1
				}],
				persValue: '',
				personPosition: [{
					text: '查看自己',
					value: 0
				},
				{
					text: '查看所有',
					value: 1
				}],
				type: 'bottom',
				userInfor: uni.getStorageSync('userInfor'),
				title: '',
				clearData: false,
                description: '', // 用户的搜索输入
				stateValue: 3,
				curuentState: '',
				rangeTime: [Date.now() - 7*24*3600*1000, Date.now()],
                range: [
					{ value: 3, text: "全部记录" },
                    { value: 0, text: "处理完成" },
					{ value: 1, text: "等待处理" },
					{ value: 2, text: "无法处理" },
				],
				showClear: false, // 是否显示清除按钮
				current: 1,
				total: 1,
				pageSize: 9,
				isLoading: false, // 加载锁
				isNoMore: false,  // 数据是否加载完毕
				FormData: {
					description: '',
					code: '',
					pass: ''
				},
				tableData: [],
				single:  new Date(),
				mediaType: ['image', 'audio']
			}
		},
		watch: {
			//使用watch来响应数据的变化，第一个参数为newVal新值，第二个参数oldVal为旧值
			description: function(newVal, oldVal) {
				this.clearData = true
				this.current = 1
				//debugger
				//console.log("a--newVal: ", newVal, "a--oldVal: ",oldVal);
			},
			stateValue: function(newVal, oldVal) {
				this.clearData = true
				this.current = 1
				//this.onSearch()	
				//console.log("b--newVal: ", newVal, "b--oldVal: ",oldVal);
			}
		},
		onTabItemTap() {
			//this.stateValue = 3
			this.rangeTime = [Date.now() - 7*24*3600*1000, Date.now()]
			//debugger
		},
		onShow() {
			//debugger
			let that = this
			let start = Date.now() - 7*24*3600*1000
			let end = Date.now()
			this.rangeTime = [timestampFormatDate(start, 'yyyy-MM-dd hh:mm:ss'),timestampFormatDate(end, 'yyyy-MM-dd hh:mm:ss')]
			this.userInfor = uni.getStorageSync('userInfor')
			this.getShop()
			uni.$on('switchTabData', (data) => {
			      console.log('接收到的参数:', data); // { id: 123, name: 'test' }
				  let id = data.id
				  if(id == 1) {
					  //debugger
					that.stateValue = 3
					that.onSearch()	
				  }
			});
		},
		onHide() {
			// 使用后移除监听，避免重复触发
			uni.$off('switchTabData');
		},
		onLoad() {
			let start = Date.now() - 7*24*3600*1000
			let end = Date.now()
			this.rangeTime = [timestampFormatDate(start, 'yyyy-MM-dd hh:mm:ss'),timestampFormatDate(end, 'yyyy-MM-dd hh:mm:ss')]
			this.onSearch();
			//this.getTime()
		},
		onReachBottom() {
			//debugger
		    if (this.isLoading || this.isNoMore) return; // 避免重复加载‌:ml-citation{ref="3,6" data="citationList"}
		    
		  },
		methods: {
			
			getShop() {
				let shop = this.userInfor.workshopList
				let shopData = []
				for(var i = 0; i < shop.length; i++) {
					shopData[i] = {}
					shopData[i].value = shop[i].id
					shopData[i].text = shop[i].workshopName
				}
				this.shopOption = shopData
			},
			tabChange(val) {
				this.tabValue = val
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			closepopDescrip() {
				this.$refs.popup.close(); 
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			getTime() {
				this.$refs.timePopup.open('bottom')
			},
			clickInter(){
				
			},
			 // 输入框内容变化时触发
			onInput(e) {
			    this.description = e.detail.value;
			    this.showClear = this.description.length > 0; // 根据输入内容显示/隐藏清除按钮
			},
			// 点击清除按钮时触发
			onClear() {
			    this.description = ''; // 清空输入框
			    this.showClear = false; // 隐藏清除按钮
			},
			//搜索功能
			  onSearch() {
				  this.showTime = this.rangeTime.map(timeStr => {
					const [datePart, timePart] = timeStr.split(' ');
					const [year, month, day] = datePart.split('-');
					const [hour, minute] = timePart.split(':');
					const formattedMinute = minute < 10 ? '0' + minute : minute;
					return `${month}-${day} ${hour}:${formattedMinute}`;
				});
				  /* [this.rangeTime[0].slice(5, 16),this.rangeTime[1].slice(5, 16)] */


				  console.log(this.checkShop)

				  this.current = 1
				  this.tableData = []
				  this.isLoading = true;
				  let stateSave = []
				  if(this.stateValue == 0) {
					  stateSave = [0]
				  } else if(this.stateValue == 1) {
					  stateSave = [1]
				  } else if(this.stateValue == 2) {
					  stateSave = [2]
				  } else if(this.stateValue == 3) {
					  stateSave = [0,1,2]
				  }
				  let prame = {
					  curret: this.current,
					  description: this.description,
					  size: this.pageSize,
					  state: stateSave,
					  classifyUserId: this.classifyUserId,
					  timeOrderByDesc: this.timeValue,
					  startTime: this.rangeTime[0],
					  endTime: this.rangeTime[1],
					  userId: this.userInfor.userId
				  }
				  post('/problem/findAll', prame)
				      .then(data => {
				  		if(data.code == 200) {
							this.clearData = false
							//debugger
							if(data.data.list.length === 0) {
								this.isLoading = false;
								this.isNoMore = true
							} else {
								this.tableData = data.data.list
								this.isNoMore = data.data.total <= this.tableData.length;
								this.isLoading = false;
							}
				  			//this.tableData = data.data.list
				  		} else {
				  			  uni.showToast({
				  			    icon: 'none',
				  			    title: data.message
				  			  });
				  		}
				      })
				      .catch(err => {
				          uni.showToast({
				             icon: 'none',
				            title: '获取数据失败，请检查接口返回'
				          });
				      });
			  },
			  searchData(pagNumber) {
				  //debugger
				
				  this.isLoading = true;
				  let stateSave = []
				  if(this.stateValue == 0) {
				  		stateSave = [0]
				  } else if(this.stateValue == 1) {
				  		stateSave = [1]
				  } else if(this.stateValue == 2) {
				  		stateSave = [2]
				  } else if(this.stateValue == 3) {
				  		stateSave = [0,1,2]
				  }
				  let prame = {
				  		curret: pagNumber,
				  		description: this.description,
				  		size: this.pageSize,
				  		state: stateSave,
					    classifyUserId: this.classifyUserId,
					    timeOrderByDesc: this.timeValue,
				  		startTime: this.rangeTime[0],
				  		endTime: this.rangeTime[1],
					    userId: this.userInfor.userId
				  }
				  post('/problem/findAll', prame)
				      .then(data => {
				  		if(data.code == 200) {
				  			this.clearData = false
				  			//debugger
				  			if(data.data.list.length === 0) {
				  				this.isLoading = false;
				  				this.isNoMore = true
				  			} else {
				  				let data2 = data.data.list
				  				let data1 = this.tableData
				  				this.tableData = [...data1, ...data2];
								//debugger
				  				this.isNoMore = data.data.total <= this.tableData.length;
				  				this.current++;
				  				this.isLoading = false;
				  			}
				  			//this.tableData = data.data.list
				  		} else {
				  			  uni.showToast({
				  			    icon: 'none',
				  			    title: data.message
				  			  });
				  		}
				      })
				      .catch(err => {
				          uni.showToast({
				             icon: 'none',
				            title: '获取数据失败，请检查接口返回'
				          });
				      });
			  },
			  handleScrollToLower() {
				  //debugger
			      if (!this.isNoMore) {
					let pageDta = this.current+1
					this.searchData(pageDta);
				  }
			    },
			  viewInfor(id) {
				  //debugger
				  uni.navigateTo({
				      url: '/pages/position/posAll/viewInfor?url=1&id=' + id // 跳转页面的路径
				  });
			  },
			  //选择框变化
			  stateChange() {
				this.clearData = true
				this.current = 1
				this.onSearch()
			  },
			  personChange() {
				  if(this.persValue == 0) {
					  this.classifyUserId = this.userInfor.userId
				  } else {
					  this.classifyUserId = null
				  }
				this.clearData = true
				this.current = 1
				this.onSearch()
			  },
			  //确定车间
			  clickShop() {
				this.clearData = true
				this.current = 1
				this.$refs.popup.close()
				this.onSearch()
			  },
			  //重置
			  clearShop() {
				  this.checkShop = []
				  this.$refs.popup.close()
			  },
		    change(e) {
				this.single = e
				console.log('change事件:', this.single = e);
						},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			changeLog() {
				this.clearData = true
				this.current = 1
				this.$refs.timePopup.close()
				this.onSearch()
			},
			timeShow() {
				//this.$refs.timepopup.close()
			},
			maskClick(e){
			}
		}
	}
</script>

<style>
	page {
	  overflow: hidden;
	  height: 100%;
	}
	/* .uni-icons {
		display: none;
	} */
	/* 隐藏全局滚动条 */
	::-webkit-scrollbar {
	  display: none !important;
	  width: 0 !important;
	  height: 0 !important;
	  background-color: transparent !important;
	}
	/* 处理部分平台兼容性 */
	uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
	  display: none !important;
	}
	.uni-list {
		background-color: rgba(237, 237, 237, 0.9) !important;
	}
	.uni-list-item {
		margin-bottom: 5px;
		border-radius: 8px;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	/* 自定义搜索框样式 */
	.custom-search-bar {
	  display: flex;
	  align-items: center;
	  padding-bottom: 5px;
	  /* background-color: #EEEEEE; */
	}
	/* 搜索框样式 */
	.custom-search-border {
		background-color: #fff;
	  border-radius: 5px; /* 圆角 */
	  padding: 5px 10px;
	  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
	  /* border: 1px solid rgb(153, 153, 153); */
	}
	.uni-slect-view {
	    align-items: center;
		border-top: 1px solid rgba(237, 237, 237, 0.9);
		line-height: 36px;
		text-align: center;
		background-color: #fff;
	}
	.uni-select-col {
		background-color: #fff;
		border-radius: 5px;
	}
	/* 搜索输入框样式 */
	.search-input {
	  flex: 1;
	  height: 30px;
	  padding: 0 10px;
	  font-size: 14px;
	  color: #333;
	}
	/* 清除按钮样式 */
	.clear-button {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding: 5px;
	  margin-right: 10px;
	  cursor: pointer;
	}
	/* 输入框占位符样式 */
	.placeholder-style {
	  color: #999;
	  font-size: 14px;
	}
	
	/* 搜索按钮样式 */
	
	.search-button {
	  //padding: 8px 16px;
	  margin-left: -1px; /* 去除按钮和输入框之间的间隙 */
	  border-left: none; /* 去除按钮左侧的边框 */
	  font-size: 15px !important;
	  padding: 5px 10px;
	  border-radius: 4px; /* 右侧圆角 */
	  background-color: #007aff; /* 按钮背景色 */
	  color: #fff; /* 按钮文字颜色 */
	}
	/* 搜索按钮文字样式 */
	.button-text {
	  color: #ffffff;
	  font-size: 14px;
	}
	.uni-list-item text {
		display: block; /* 确保文字是块级显示 */
		color: #000; /* 设置文字颜色，确保与背景色不同 */
	},
	/* 选择框宽度 */
	/* .uni-select__selector-empty, .uni-select__selector-item {
	    display: flex;
	    cursor: pointer;
	    line-height: 35px;
	    font-size: 14px;
	    text-align: center;
	    padding: 0px 10px;
	    width: 59px !important;
	} */
	.uni-select {
		font-size: 12px !important;
	}
	.uni-col-select-view {
	   display: flex;
	   align-items: center;
	   justify-content: center;
		font-size: 13px;
		color: #666;
		line-height: 36px;
	}
	.uni-select__input-text {
	    width: 100%;
	    color: #666 !important;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    -o-text-overflow: ellipsis;
	    overflow: hidden;
	}
	.uni-check-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 3px;
	}
	.uni-data-checklist {
		margin-top: 5px !important; 
	}
.view-List {
	margin-bottom: 10px;
},
	.header-title {
	  font-size: 16px;
	  color: #000;
	  font-weight: 400;
	}
	.header-note {
		font-size: 12px;
		text-align: right !important;
	    color: #000;
		margin-top: 5px;
	}
	.header-shop {
		color: rgb(153, 153, 153) !important;
		font-size: 12px;
		margin-top: 5px;
	}
	.uni-header-tag {
		text-align: right;
		width: 100%;
	},
	.header-tag {
		display: inline-block !important;
	},
	.uni-list-item__container {
	  display: flex !important;
	  padding-right: 0px !important;
	  flex-direction: column;  /* 垂直排列 */
	}
	.uni-row-select {
		text-align: center;
	}
	.uni-row-select.uni-stat__select {
	    display: flex;
	    align-items: center;
	    width: 100%;
	    flex: 1;
		height: 35px;
	    box-sizing: border-box;
	}
		.uni-form-select {
			text-align: center;
		}
		/* .uni-select {
		    font-size: 14px;
		    box-sizing: border-box;
		    border-radius: 4px;
		    padding: 0 5px;
		    padding-left: 10px;
		    position: relative;
		    display: flex;
		    -webkit-user-select: none;
		    user-select: none;
		    flex-direction: row;
		    align-items: center;
		    width: 100%;
		    flex: 1;
		} */
	.example-body {
		background-color: #fff;
    }
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.popup-content {
		height: 450px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		padding-bottom: 5px;
	}
	.timepopup-content {
		background-color: #fff;
		padding-bottom: 5px;
	}
	.text {
		font-size: 12px;
		color: #666;
	}
	.selected-list {
		color: #666;
		font-size: 12px;
	}
	.uni-time-text {
		color: #666;
		display: block;
		font-size: 13px;
	}
	.uni-tab-col {
		background-color: rgba(237, 237, 237, 0.9); 
		font-size: 22px;
		height: 350px;
		text-align: center;
		width: 100%;
		border-radius: 5px;
	}
	.uni-tab-list {
		line-height: 50px;
	}
	.uni-tab-color {
		background-color: #fff;
	}
</style>
